<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .ul >li{
        margin-left: 100px;
        background-color: pink;
        width: 200px;
        list-style: none;
        margin-bottom: 2px;
        display: flex;
        justify-content: space-between;
    }
    textarea{
        margin-left: 100px;
        margin-top: 100px;
    }
</style>
<body>
    <textarea></textarea>
    <button onclick="fn()">提交</button>
    <ul class="ul">
    </ul>
    <script>
        let ul = document.querySelector('.ul');
        let textarea = document.querySelector('textarea');
        function fn() {
            let sum = localStorage.getItem('person');
            if (sum === null) {
                alert('请先登陆再发送信息,马上为您跳转页面');
                window.location.href = './login.html'
            }else if(textarea.value == ''){
                alert('请先输入内容');
            } else {
                let li = document.createElement('li');
                li.innerHTML= textarea.value + '<button class="btn" onclick="del()">删除</button>';
                textarea.value= '';
               return ul.appendChild(li);
            }
        }
        function del(){
              let btn =document.querySelectorAll('.btn');
              for(let i = 0; i <btn.length; i++){
               btn[i].addEventListener('click',function(){
                    this.parentNode.remove()
               })
              }
        }
    </script>
</body>

</html>